<template>
  <div class="login_container">
    <div class="login_box">
      <!-- 头像区域 -->
      <div class="avatar_box">
        <img src="../assets/images/logo1.png" />
      </div>
      <div class="titleTxt">
        <h2>邮件后台管理系统</h2>
      </div>

      <!-- 登陆表单 -->
      <el-form
        label-width="80px"
        :model="loginForm"
        class="login_form"
        :rules="loginFormRules"
        ref="loginFormRef"
      >
        <!-- 用户名 -->
        <el-form-item label="账号" class="inputbox" prop="username">
          <el-input
            prefix-icon="el-icon-user"
            v-model="loginForm.username"
            placeholder="请输入账号"
          ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item label="密码" class="inputbox" prop="password">
          <el-input
            prefix-icon="el-icon-lock"
            v-model="loginForm.password"
            type="password"
            placeholder="请输入密码"
            @keyup.enter.native="login()"
          ></el-input>
        </el-form-item>
        <!-- 登陆注册按钮 -->
        <div class="btns">
          <el-button type="primary" round @click="login">登录</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //登陆表单
      loginForm: {
        username: "lunangangster_store@lunangangster.store",
        password: "lunangangster_store@lunangangster.store"
      },
      loginFormRules: {
        username: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      }
    };
  },
  methods: {
    login() {
      this.$refs.loginFormRef.validate(async (valid) => {
        if (!valid) return this.$message.error("请检查账号和密码!");
        const res = await this.$http.post(
          "/smtpmail/user/manager/login",
          this.loginForm
        );
        console.log(res);
        console.log(res.headers.smtp_token);
        if (res.data.code === 20000) {
          //清除缓存
          window.sessionStorage.clear();
          //保存用户Token
          window.sessionStorage.setItem("SMTP_TOKEN", res.headers.smtp_token);
          this.$router.push("dataAnalysis");
          this.$message({ message: "登陆成功", type: "success" });
          // if (res.code === 30000) this.$router.push("home");
          // else {
          //   window.sessionStorage.setItem(
          //     "club",
          //     JSON.stringify(res.data.club)
          //   );
          //   this.$router.push("dataAnalysis");
          // }
        } else return this.$message.error("登陆失败！");
      });
    }
  }
};
</script>

<style lang="less" scoped>
.login_container {
  background-color: #2b4b6b;
  background-image: url("~@/assets/images/background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}

.login_box {
  width: 480px;
  height: 350px;
  background-color: #ffffff;
  border-radius: 14px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .avatar_box {
    height: 130px;
    width: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 10px #ddd;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    img {
      border-radius: 50%;
      width: 100%;
      height: 100%;
      background-color: #eee;
    }
  }
}

.btns {
  display: flex;
  justify-content: center;
  position: relative;
  top: 10px;
  .el-button {
    width: 50%;
    margin-left: 8%;
  }
}
.login_form {
  position: absolute;
  bottom: 10%;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
}
/deep/.el-form-item.is-required:not(.is-no-asterisk)
  > .el-form-item__label:before {
  content: "";
}
.titleTxt {
  position: relative;
  top: 25%;
  left: 26%;
  font-size: 18px;
}
</style>
<style lang="less">
.inputbox {
  //
  .el-form-item__label {
    text-align: center;
  }
  .el-form-item__content {
    .el-form-item__error {
      padding-top: 8px;
    }
    .el-input {
      position: absolute;
      margin: 0px;
    }
    .el-input--prefix {
      .el-input__inner {
        //background-color: red;
        width: 90%;
        height: 46px;
        border-radius: 100px;
      }
    }
  }
}
</style>